<template>
  <div class="fit flex flex-center" v-show="tipText">
    <q-spinner-comment color="light-blue" size="50px" />
    <div class="color-changing-text">{{ tipText }}</div>
    <audio :src="tipMp3" ref="audio" v-show="0"></audio>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import mp3 from 'app/public/wav/tip.mp3';
import EventBus from 'src/lib/event-bus'; // 用于组件间通信

export default defineComponent({
  name: 'bulletinBoard',
  setup () {
    const tipMp3 = mp3;
    const tipText = ref('');

    // EventBus.on('new_order', (val) => {
    //   tipText.value = val;
    // });

    return {
      tipMp3,
      tipText
    }
  },
  data () {
    return {
    }
  },
  created () {
    const self = this;
    EventBus.on('new_order', (val) => {
      self.tipText = val;
      self.play();
      setTimeout(() => {
        self.tipText = '';
      }, 10000);
    });
  },
  mounted () {
  },
  methods: {
    play () {
      this.$refs.audio.currentTime = 0;
      this.$refs.audio.play();
    }
  }
});
</script>

<style lang="scss">
.color-changing-text {
  animation: colorChange 5s infinite;
  font-size: 50px;
  padding-left: 20px;
}

@keyframes colorChange {
  0% { color: $red; }
  25% { color: $yellow; }
  50% { color: $green; }
  75% { color: $light-blue; }
  100% { color: white; }
}
</style>
